import { useState } from 'react';
import { 
    Box, 
    Button, 
    Typography, 
    Paper,
    Grid,
    TextField
} from '@mui/material';
import ToolPageTemplate from '@/components/ToolPageTemplate';
import LinkIcon from '@mui/icons-material/Link';

const URLEncodePage = () => {
    const [input, setInput] = useState('');
    const [encoded, setEncoded] = useState('');
    const [decoded, setDecoded] = useState('');

    const handleEncode = () => {
        try {
            setEncoded(encodeURIComponent(input));
        } catch (error) {
            setEncoded('编码失败');
        }
    };

    const handleDecode = () => {
        try {
            setDecoded(decodeURIComponent(input));
        } catch (error) {
            setDecoded('解码失败');
        }
    };

    return (
        <ToolPageTemplate 
            title="URL编码解码"
            description="URL编码解码工具，处理特殊字符转换"
            category="格式转换"
            categoryColor="#7b1fa2"
        >
            <Grid container spacing={4}>
                <Grid item xs={12}>
                    <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
                        输入文本
                    </Typography>
                    <TextField
                        fullWidth
                        multiline
                        rows={4}
                        placeholder="请输入要编码或解码的URL..."
                        value={input}
                        onChange={(e) => setInput(e.target.value)}
                        sx={{ mb: 3 }}
                    />
                    
                    <Box sx={{ display: 'flex', gap: 2, mb: 4 }}>
                        <Button 
                            variant="contained" 
                            startIcon={<LinkIcon />}
                            onClick={handleEncode}
                            disabled={!input.trim()}
                        >
                            URL编码
                        </Button>
                        <Button 
                            variant="outlined" 
                            startIcon={<LinkIcon />}
                            onClick={handleDecode}
                            disabled={!input.trim()}
                        >
                            URL解码
                        </Button>
                    </Box>
                </Grid>

                {encoded && (
                    <Grid item xs={12}>
                        <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
                            编码结果
                        </Typography>
                        <Paper elevation={0} sx={{ p: 3, bgcolor: 'grey.50' }}>
                            <Typography component="pre" sx={{ whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>
                                {encoded}
                            </Typography>
                        </Paper>
                    </Grid>
                )}

                {decoded && (
                    <Grid item xs={12}>
                        <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
                            解码结果
                        </Typography>
                        <Paper elevation={0} sx={{ p: 3, bgcolor: 'grey.50' }}>
                            <Typography component="pre" sx={{ whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>
                                {decoded}
                            </Typography>
                        </Paper>
                    </Grid>
                )}
            </Grid>
        </ToolPageTemplate>
    );
};

export default URLEncodePage;